<template>
  <u-popup
    v-model="showFlag"
    mode="bottom"
    height="100%"
    :custom-style="{ background: '#f0f1f2' }"
    border-radius="12"
  >
    <view class="close-box">
      <u-icon
        name="close"
        color="#969696"
        size="28"
        @click="closeHandle"
      ></u-icon>
    </view>
    <view
      class="u-p-l-20 u-p-r-20 u-p-t-80"
      style="background: #f0f1f2; min-height: 100%; padding-bottom: 188rpx"
    >
      <view v-for="(item, index) in nodeList" :key="item.nodeId">
        <text class="block font-bold u-font-32 u-content-color">{{
          item.nodeName
        }}</text>
        <view class="next-point u-m-t-20 u-m-b-20">
          <u-cell-group>
            <u-cell-item @click="showMember(item, index)">
              <template #title>
                <text v-if="labels[index]?.length && labels[index][0]">{{
                  labels[index].join(',')
                }}</text>
                <text class="error" v-else>未设置</text>
              </template>
            </u-cell-item>
          </u-cell-group>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <u-button shape="circle" type="primary" @click="submit">确定</u-button>
    </view>
  </u-popup>
  <setMember
    ref="refSetmember"
    :memberType="currNodeItem.dynamicParam"
    :choosedKeys="currNodeItem.approvalParamList"
    :labels="
      labels[currNodeIndex]?.length && labels[currNodeIndex][0]
        ? labels[currNodeIndex]
        : []
    "
    @submit="chooseSubmit"
  ></setMember>
</template>
<script lang="ts" setup>
import setMember from './components/setMember.vue';
import { cloneDeep } from 'lodash-es';

const emits = defineEmits(['submit']);

const nodeList = ref<any[]>([]);
const currNodeItem = ref<any>({});
const currNodeIndex = ref();
const labels = ref<any[]>([]);

const refSetmember = ref();
const showMember = (item: any, index: number) => {
  currNodeItem.value = item;
  currNodeIndex.value = index;
  refSetmember.value.show();
};

const chooseSubmit = (e: any) => {
  const { type, data, labels: labelList } = e;
  currNodeItem.value.approvalParamList = data;
  currNodeItem.value.dynamicParam = type;
  labels.value[currNodeIndex.value] = labelList;
};

const closeHandle = () => {
  showFlag.value = false;
};

const submit = () => {
  const checkFlag = nodeList.value.every((item) => {
    return item.approvalParamList && item.approvalParamList.length > 0;
  });
  if (checkFlag) {
    emits('submit', nodeList.value);
    showFlag.value = false;
  } else {
    uni.showToast({
      title: '请选择节点审批人',
      icon: 'none',
      duration: 2000,
    });
  }
};

const showFlag = ref(false);
const show = (nList: any[]) => {
  showFlag.value = true;
  nodeList.value = cloneDeep(nList);
  labels.value = [];
  currNodeItem.value = {};
  currNodeIndex.value = undefined;
};

defineExpose({
  show,
});
</script>
<style lang="scss">
.close-box {
  position: fixed;
  top: 0;
  line-height: 80rpx;
  height: 80rpx;
  text-align: right;
  padding: 0 20rpx;
  background: #fff;
  width: 100%;
  z-index: 10;
}
</style>
